<template>
    <div class="v-details">
        <!-- <plan :plant="Spart.COUNT"></plan>
        <div style="height:100%;">
            <spacing></spacing>
            <particul v-if="Spart.result" :partic="Spart.result"></particul>
            <spacing></spacing>
            <div class="partcont">
                <handling v-if="Spart" :handing="Spart.result.EVENTFLOW_LIST"></handling>
            </div>
            <Row>
                <Col span=20 offset="2" v-if="this.$route.query.num==0" @click.native="tijiao">
                    <div class="cha-button">提交</div>
                </Col>
            </Row>
            <particulars v-if="state" @sta="chageSta" :eventId="Spart.result.EVENT_ID"></particulars>
        </div> -->
        <div>
        <Upload
            :before-upload="handleUpload"
            action="//jsonplaceholder.typicode.com/posts/">
            <Button type="ghost" icon="ios-cloud-upload-outline">选择要上传文件的文件</Button>
        </Upload>
        <div v-if="file !== null">待上传文件：{{ file.name }} <Button type="text" @click="upload" :loading="loadingStatus">
            {{ loadingStatus ? '上传中' : '点击上传' }}</Button></div>
    </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            state: false,
            Spart: '',
            Bstate: ''
        }
    },
    methods: {
        tijiao() { // 显示回复组件
            this.state = true
        },
        chageSta() { // 关闭回复组件
            this.state = false
        },
        /**
         * 设置情况反应（教职工）已处理
         * @staffState 处理状态
         */
        async setHandoutList(senvt) {
            const State = this.$store.state
            const events = this.$route.query.Sindex
            let HandoutList = await this.$store.dispatch('getHandoutL', {
                userId: State.userInfo.USER_ID,
                senvt: events
            })
            this.Spart = HandoutList
        }
    },
    components: {
        plan: () => import('../../components/staff/plan.vue'), // 进度条
        spacing: () => import('../../components/staff/spacing.vue'), // 间隔组件
        particul: () => import('../../components/staff/particul.vue'), // 查看详情问题情况插件
        handling: () => import('../../components/staff/handling.vue'), // 教职工查看详情处理组件
        particulars: () => import('../../components/staff/particulars.vue') // 回复组件
    },
    created() {
        const Vm = this
        /**
         * 确认用户信息是否加载
         */
        function isUserInfo() {
            return new Promise((resolve, reject) => {
                let isu = setInterval(() => {
                    if (Vm.$store.state.userInfo) {
                        clearInterval(isu)
                        resolve()
                    }
                }, 100)
            })
        }
        // 执行步骤
        async function Step() {
            Vm.setHandoutList()
        }
        isUserInfo().then(() => {
            Step()
        })
    }
}
</script>

<style lang="less">
.v-details{
    background-color:white;
    height: 100%;
    min-height: 600px;
    .partcont{
    padding-left:20px;
    background-color:white;
    }
    .cha-button{
        color:white;
        width:80%;
        height: 50px;
        margin:0 auto;
        text-align:center;
        line-height:50px;
        border-radius:5px;
        font-size: 18px;
        background-color:#0093DD;
    }
}
</style>
